<template>
  <div class="app-container">
    <el-col>
      <el-col :span="4">
        <div class="grid-content bg-purple">
          <el-tree
            :data="categories"
            :props="defaultProps"
            node-key="id"
            default-expand-all
            :expand-on-click-node="false"
            style="width:60%"
          ></el-tree>
        </div>
      </el-col>
      <el-col :span="20">
        <div class="grid-content bg-purple-light">Table</div>
      </el-col>
    </el-col>
  </div>
</template>

<script>
import { fetchContentCategories } from "@/api/cms";
export default {
  name: "Content",
  data() {
    return {
      categories: [],
      defaultProps: {
        children: "children",
        label: "label",
        isLeaf: "isLeaf"
      }
    };
  },
  methods: {
    //获取分类数据
    getData() {
      fetchContentCategories().then(res => {
        this.categories = res.data;
      });
    }
  },
  created: function() {
    this.getData();
  }
};
</script>

<style>
</style>